/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 *
 */

import * as React from 'react';
import echarts from 'echarts';
export default class PileCharts extends React.Component {
  public componentDidMount() {
    const myChart = echarts.init(document.getElementById(
      'pileCharts'
    ) as HTMLDivElement);

    const option = {
      title: {
        text: '各风险行业分布情况'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: [
          '农林牧渔业',
          '采矿业',
          '制造业',
          '建筑业',
          '批发和零售',
          '金融业',
          '电力、热气、燃气...'
        ]
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 133]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  public render() {
    return (
      <div
        id="pileCharts"
        style={{
          width: 757,
          height: 353,
          background: 'rgba(255,255,255,1)',
          borderRadius: 2
        }}
      />
    );
  }
}
